<template>
    <transition name="el-zoom-in-left">
        <div class="left" v-show="expand">
            <div class="list">
                <div class="iconItem" v-for="(i, k) in data" @click="setActive(k)">
                    <el-button :class="active === i.key ? 'active' : 'btn'" link :icon="i.icon" :title="i.title"/>
                    <span :style="active === i.key ? 'color:rgb(182, 211, 244);font-weight:bold' : ''">{{i.title}}</span>
                </div>
            </div>
            <BuildItem :emitEditor="emitEditor" :activeKey="active" v-if="active !== ''"/>
        </div>
    </transition>
    <div class="expand-show" :style="{ left: expand ? '250px' : '0px' }">
        <el-icon class="icon" @click="expand = !expand">
            <Expand v-if="!expand"/>
            <Fold v-else/>
        </el-icon>
    </div>
</template>
<script setup>
import {ref} from 'vue';
import BuildItem from './buildItem.vue';
import {defHttp} from '@/util/http/index';

defineProps(['emitEditor']);

const expand = ref(true)
const active = ref('');
const data = ref([]);

defHttp.get({url: '3d-editor/files/index.json'}, {isTransformResponse: false}).then((res) => {
    data.value = res;
    active.value = res[0].key
});

function setActive(k) {
    // k是索引，需要获取对应的key值
    active.value = data.value[k].key;
}
</script>
<style lang="less" scoped>
.left {
    width: 250px;
    height: calc(100% - 50px); // 50px是顶部导航栏的高度
    background-color: #181818;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 100;
    display: flex;
    .list {
        height: 100%;
        display: grid;
        grid-template-rows: repeat(auto-fill, 62px);
        border-right: 1px solid #4a4a4a;
        justify-items: center;
        align-items: center;
        box-sizing: border-box;
        .btn {
            font-size: 30px;
        }
        .active {
            font-size: 36px;
            color: rgb(182, 211, 244);
            font-weight: 800;
            transition: all 0.3s;
        }
    }
}
.iconItem {
    width: 60px;
    height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #3e3e3e;
    user-select: none;
}
.expand-show {
    position: absolute;
    bottom: 15px;
    background-color: #181818;
    left: 287px;
    height: 30px;
    border-radius: 0px 3px 3px 0px;
    z-index: 100;
    .icon {
        font-size: 30px;
        color: #fff;
        cursor: pointer;
        transition: all 0.8s;
        &:hover {
            transform: rotate(180deg);
        }
    }
}
</style>
